<template>
  <el-pagination
    background
    layout="prev, pager, next"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page.sync="currentPage"
    :total="total">
  </el-pagination>
</template>

<script>
export default {
  data () {
    return {
      currentPage: 1
    }
  },
  props: {
    total: {
      type: Number,
      default: 0
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.$emit('handleSizeChange', val);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$emit('handleCurrentChange', val);
    }
  }
}
</script>